<template>
	<view class="inquire-box">
		<view class="inquire-box-content">
			<view class="inquier-nav">
				<view v-for="(item,index) in navlist" :key="index" :class="{'btna': count === index}"  class="biaoti2" @click="change(index)">{{ item }}</view>
			</view>
			<view class="inquier-nav-con">
				<view class="inquier_info" :class="{dis:count === 0}">
					<chulizhong v-if="count === 0"></chulizhong>
				</view>
				<view class="inquier_info" :class="{dis:count === 1}">
					<qingjiazhong v-if="count === 1"></qingjiazhong>
				</view>
				<view class="inquier_info" :class="{dis:count === 2}">
					<xiaojiajilu v-if="count === 2"></xiaojiajilu>
				</view>
				
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import chulizhong from "@/pages/components/chulizhong.vue"
	import yichuli from "@/pages/components/yichuli.vue"
	import qingjiazhong from "@/pages/components/qingjiazhong.vue"
	import xiaojiajilu from "@/pages/components/xiaojiajilu.vue"
	
	export default {
		data() {
			return {
				navlist:['待书记处理','已处理','销假记录'],
				count:0
			}
		},
		methods: {
			change(index){
				this.count = index;
			}
		},
		components:{
			chulizhong,
			yichuli,
			qingjiazhong,
			xiaojiajilu
			
		}
	}
</script>

<style lang="scss">
	@import url(@/static/common.css);
	.inquire-box{
		width: 100%;
		overflow: hidden;
		box-sizing: border-box;
		.inquire-box-content{
			// width: 95%;
			// margin: 0 auto;
			// overflow: hidden;
			.inquier-nav{
				width: 100%;
				box-sizing: border-box;
				overflow: hidden;
				display: flex;
				flex-direction: row;
				view{
					justify-content: center;
					align-items: center;
					flex: 1;
					display: flex;
					background: #f5f5f5;
					padding: 40rpx 0;
					
				}
			}
			
			.btna{
				display: flex;
				box-sizing: border-box;
				justify-content: center;
				align-items: center;
				background: #ffffff !important;
				position: relative;
				color: #77312A;
				font-weight: bold;
			}
			// .btna::after{
			// 	content:'';
			// 	width: 60%;
			// 	height: 1px;
			// 	background-color: #00b783;
			// 	position: absolute;
			// 	bottom: 0;
				// left: 50%;
				// margin-left: -20px;
			// }
		}
		.inquier_info{
			display: none;
		}
		.dis{
			display: block;
		}
	}
</style>
